<template>
  <div class="photosinfo-container">
    <h3 class="title">{{photoinfo.title}}</h3>
    <p class="info">
      <span>发表时间：{{photoinfo.add_time | dateFormate}}</span>
      <span>点击次数:{{photoinfo.click}}次</span>
    </p>
    <hr />

<div class="thumb-img-list">
   <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
</div>

    <span class="content" v-html="photoinfo.content"></span>
    <comment :newsid="id"></comment>
  </div>
</template>
<script>
import comment from "../sub-components/Comment.vue";
export default {
  data() {
    return {
      photoinfo: [],
      photolist:[],
      slide1: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          }
        ]
    };
  },
  methods: {
    getPhotoInfo() {
      this.$http.get("/api/getimageInfo/" + this.id).then(result => {
        console.log(result.data.message[0]);
        this.photoinfo = result.data.message[0];
      });
    },
    getThumImg() {
      this.$http.get("/api/getthumimages/" + this.id).then(result => {
        console.log(result.data.message);
        this.photolist=result.data.message;
      });
    }, handleClose () {
        console.log('close event')
      }
  },
  created() {
    this.getPhotoInfo();
    this.getThumImg();
  },
  props: ["id"],
  components: {
    comment
  }
};
</script>
<style lang="scss" scoped>
.photosinfo-container {
  padding: 7px;

  .title {
    font-size: 15px;
    text-align: center;
    color: red;
  }

  .info {
    color: #26a2ff;
    display: flex;
    justify-content: space-between;
  }
  .content {
    font-size: 10px;
    line-height: 30px;
  }
}
</style>